<template>
  <!-- 用户信息 -->
  <view>
    <u-cell-group>
      <u-cell-item class="cellitem" hover-class="none" bg-color="#000000" title="头像" value="编辑">
        <image class="user-img" slot="icon" :src="user.headimg || '../../static/active-my.png'" mode=""></image>
      </u-cell-item>
      <u-cell-item class="cellitem" hover-class="none" bg-color="#000000" title="昵称" :value="user.nickname"
        @click="nickisshow=true"></u-cell-item>
      <u-cell-item class="cellitem" hover-class="none" bg-color="#000000" title="签名" :value="user.content" @click="qianmingisshow=true">
      </u-cell-item>
      <u-cell-item class="cellitem" hover-class="none" :arrow="false" bg-color="#000000" title="账号"  :value="user.phone">
      </u-cell-item>
      <u-cell-item class="cellitem" hover-class="none" :arrow="false" bg-color="#000000" title="UID"  :value="user.id">
        <image slot="right-icon" class="cellimg" src="../../static/copy.png" mode=""></image>
      </u-cell-item>
    </u-cell-group>
    <button class="logout" size="default" type="primary" @click="updatainfo">修改个人信息</button>
    <button class="logout" size="default" type="primary" @click="logout">退出</button>
    <!-- 修改昵称弹出层 -->
    <u-popup v-model="nickisshow" mode="center" width="600rpx" height="360rpx" mask :mask-close-able="false"
      :closeable="true">
      <view class="nickname-box">
        <view class="nick-title">昵称</view>
        <view class="nick-ipt">
          <input type="text" value="" placeholder="请输入昵称" />
        </view>
        <view class="nick-btns">
          <view class="">
            取消
          </view>
          <view class="">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 修改昵称弹出层结束 -->
    <!-- 修改签名弹出层 -->
    <u-popup v-model="qianmingisshow" mode="center" width="600rpx" height="360rpx" mask :mask-close-able="false"
      :closeable="true">
      <view class="nickname-box">
        <view class="nick-title">签名</view>
        <view class="nick-ipt">
          <input type="text" value="" placeholder="输入签名,最多10个字符" />
        </view>
        <view class="nick-btns">
          <view class="">
            取消
          </view>
          <view class="">
            确认
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 修改昵称弹出层结束 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        nickisshow: false, // 昵称弹层显示
        qianmingisshow: false, // 签名弹层显示
        user:{} // 用户信息
      }
    },
    onShow() {
     this.getuserinfo() // 获取个人信息
    },
    methods: {
      // 获取个人信息
      async getuserinfo(){
        const {data:res}= await this.$myHttp({
          method:'POST',
          url:'shows/index/get_user_info',
          data:{
            uid:uni.getStorageSync('uid'),
            token:uni.getStorageSync('token')
          }
        })
        if(res.code==200){
          this.user=res.data
          console.log(this.user)
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
        }
      },
      // 退出登录
      async logout() {
        var that=this
        uni.showModal({
        	title: "提示",
        	content: "确定要退出吗？",
        	success(res) {
        		if (res.confirm) {
              that.logouts()
        			uni.reLaunch({
        				url: "../login/login"
        			})
        		}
        	}
        })
      },
      // 退出登录
      async logouts(){
        const {
          data: res
        } = await this.$myHttp({
          method: 'POST',
          url: 'shows/index/login_out',
          data: {
            uid: uni.getStorageSync('uid')
          }
        })
        console.log(res)
        if (res.code == 200) {
          uni.removeStorageSync('uid')
          uni.removeStorageSync('token')
          uni.navigateTo({
            url:'../login/login'
          })
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        }else{
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        }
      },
      // 修改个人信息
       updatainfo(){
        uni.navigateTo({
          url:'../updatainfo/updatainfo'
        })
      }
    }
  }
</script>

<style>
  .cellitem {
    color: #FFFFFF;
  }

  .cellimg {
    width: 40rpx;
    height: 40rpx;
    margin-left: 20rpx;
  }

  .user-img {
    width: 65rpx;
    height: 65rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .nickname-box {
    width: 100%;
    height: 100%;
    color: #FFFFFF;
    background-color: #272b2c;
    padding: 40rpx;
  }

  .nick-title {
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 60rpx;
  }

  .nick-ipt input {
    border-bottom: 1px solid #294570;
  }

  .nick-btns {
    display: flex;
    justify-content: space-around;
    margin-top: 60rpx;
    color: #007AFF;
    font-size: 36rpx;
  }

  .logout {
    margin: 100rpx 60rpx;
  }
</style>
